class ControlButton {
    constructor({ action, x = 0, y = 0, offsetX = 0, offsetY = 0, width, height, color, icon, onClick }) {
        this.action = action;
        this.x = x;
        this.y = y;
        this.offsetX = offsetX;
        this.offsetY = offsetY;
        this.width = width;
        this.height = height;
        this.color = color;
        this.icon = icon;
        this.onClick = onClick; // Function to execute on click

        if (this.icon) {
            this.img = new Image();
            this.img.src = this.icon;
        }
    }
    render(context, wedge) {
        let x = wedge.x + wedge.width * this.x + this.offsetX - this.width / 2;
        let y = wedge.y + wedge.height * this.y + this.offsetX - this.height / 2;

        if (this.icon) {
            if (this.img.complete) {
                context.drawImage(this.img, x, y, this.width, this.height);
            } else {
                this.img.onload = () => {
                    context.drawImage(this.img, x, y, this.width, this.height);
                };
            }
        } else {
            context.fillStyle = this.color;
            context.fillRect(x, y, this.width, this.height);
        }
    }
    contains(x, y, wedge) {
        let ax = wedge.x + wedge.width * this.x + this.offsetX - this.width / 2;
        let ay = wedge.y + wedge.height * this.y + this.offsetX - this.height / 2;
        return x >= ax && x <= ax + this.width && y >= ay && y <= ay + this.height;
    }
}
